<template>
<div class="main">
    <div class="top">
        <el-row>
            <el-col :span="10">
                <div class="logo">
                    {{$t("login.softName")}}
                </div>
            </el-col>
            <el-col :span="14">
                <div class="userinfo">
                    <el-popover placement="bottom" title="" width="200" trigger="click" :content="$t('login.contactUsTip')">
                        <el-button slot="reference" type="primary" icon="el-icon-service">{{$t("login.contactUs")}}</el-button>
                    </el-popover>
                </div>
            </el-col>
        </el-row>
    </div>
    <div class="center">
        <el-row style="height:60%;width:35%;min-width:400px;">
            <el-col :span="24" style="">
                <el-form ref="loginForm" :model="loginForm" :rules="rules" label-width="80px" style="background: url(./static/img/login_bg.jpg) center !important;" class="login-container">
                    <el-form-item :label="$t('login.form.username')" prop="username">
                        <el-input v-model="loginForm.username" autocomplete="off" @keyup.enter.native="loginEvent" clearable prefix-icon="iconfont icon-denglu"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('login.form.userpwd')" prop="userpwd">
                        <el-input v-model="loginForm.userpwd" autocomplete="off" type="password" @keyup.enter.native="loginEvent" clearable prefix-icon="iconfont icon-denglushimima"></el-input>
                    </el-form-item>
                    <el-form-item style="text-align:right">
                        <el-button type="primary" icon="iconfont icon-ruzhuchenggongdapx" plain>{{$t("login.form.registerBtn")}}</el-button>
                        <el-button type="primary" icon="iconfont icon-denglutijiao" @click="loginEvent">{{$t("login.form.loginBtn")}}</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</div>
</template>

<script>
import {
    requestLogin
} from '../api/api';
import screenfull from 'screenfull'
export default {
    data() {
        return {
            loginForm: {
                username: '',
                userpwd: ''
            },
            rules: {
                username: [{
                    required: true,
                    message: this.$t("login.form.usernameRuleTip"),
                    trigger: 'blur'
                }],
                userpwd: [{
                    required: true,
                    message: this.$t("login.form.userpwdRuleTip"),
                    trigger: 'blur'
                }]
            },
        };
    },
    mounted() {
        //检测本地localstorage是否有某个KEY存在，如果存在
        //读取对应的值，JS解析这个值解析出【店铺编号和过期时间】
        //如果没有解析错误，则登陆成功跳转到主页面
        // if (localStorage.getItem("shopToken") != null && localStorage.getItem("shopToken").length != 0) {
        //     this.$router.push({
        //         path: '/home'
        //     });
        // }
    },
    created: function () {},
    methods: {
        loginEvent(ev) {
            var _this = this;
            this.$refs.loginForm.validate((valid) => {
                if (valid) {
                    if (screenfull.enabled) {
                        screenfull.request();
                    }
                    var loginParams = {
                        username: this.loginForm.username,
                        userpwd: this.loginForm.userpwd
                    };
                    requestLogin(loginParams).then(res => {
                        this.logining = false;
                        let {
                            msg,
                            code
                        } = res;
                        if (code !== "0") {
                            this.$message({
                                message: msg,
                                type: 'error'
                            });
                        } else {
                            var token = res.data.shopToken;
                            localStorage.setItem("shopToken", token);
                            //【店铺编号/店铺名称/过期时间】
                            //校验通过，则把服务器的TOKEN存储到本地localstorage，方便下次免密登陆
                            this.$router.push({
                                path: '/home'
                            });
                        }
                    });
                } else {
                    console.log('valid fail,error submit!!');
                    return false;
                }
            });

        }
    }
}
</script>

<style lang="scss" scoped>
@import '~scss_vars';

.main {
    background-color: #012547;
    display: grid;
    grid-template-rows: 60px auto;
    color: #ffffff;
}

.top {
    background-color: #014171;
    padding: 0px 20px;
}

.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav {
    display: flex;
    justify-content: Center;
    align-items: Center;
    font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
    font-size: 48px;
    color: #ffffff;
}

.logo {
    display: flex;
    justify-content: left;
    align-items: Center;
    height: 60px;
    font-size: 26px;
}

.userinfo {
    display: flex;
    justify-content: left;
    align-items: Center;
    text-align: right;
    float: right;
    height: 60px;
}

.login-container {
    background-color: #ffffff;
    opacity: 0.5;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    background-clip: padding-box;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
    transition: background-position 0.6s ease 0s;
    opacity: 0.8;
    padding: 100px 50px 50px 50px;
}
</style>
